<template>
  <div class="">
    <adminHead></adminHead>
    <main>
      <h1 style="text-align: center">数据统计</h1>
      <div class="box">
        <span class="titleNow">当日数据</span>
        <span>新增用户{{ daySum.todayCount }}</span>
        <span>新增订单 0</span>
      </div>
      <div class="box">
        <span class="titleSum">总数据</span>
        <span>注册用户{{ sumImage.userCount }}</span>
        <span>订单数量{{ sumImage.orderCount }}</span>
      </div>
      <div class="startEndImg">
        <div class="btnBox">
          <button @click="updateShowBox" :class="!showBox ? 'gray' : ''" class="blue"></button>
          <span>用户</span>
        </div>
        <div class="btnBox">
          <button @click="updateShowLine" :class="!showLine ? 'gray' : ''" class="orange"></button>
          <span>订单</span>
        </div>
        <div class="btnBox">
          <button @click="updateShowCircle" :class="!showCircle ? 'gray' : ''" class="rgbss"></button>
          <span>总数据</span>
        </div>
      </div>
      <transition name="boxImg">
        <div v-show="showBox" id="main" style="width: 100%; height: 300px"></div>
      </transition>
      <transition name="boxImg">
        <div v-show="showLine" id="line" style="width: 100%; height: 300px"></div>
      </transition>
      <transition name="boxImg">
        <div v-show="showCircle" id="circle" style="width: 100%; height: 300px"></div>
      </transition>
    </main>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import adminHead from "@/components/adminHead.vue";

import * as echarts from "echarts";

import { selectAllCount, selectTimeUserCount } from "@/api/getPostApi";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    adminHead,
  },
  data() {
    //这里存放数据
    return {
      myChart: "",
      lmyChart: "",
      cmyChart: "",
      showBox: true,
      showLine: true,
      showCircle: true,
      Today: new Date(),
      Yesterday: new Date(new Date().getTime() - 86400000),
      Daybeforeyesterday: new Date(new Date().getTime() - 172800000),
      sumImage: "",
      daySum: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    intoData() {
      this.lmyChart.setOption({
        title: {
          text: "新增订单",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: [`${this.Daybeforeyesterday.getFullYear()}-${this.Daybeforeyesterday.getMonth() + 1}-${this.Daybeforeyesterday.getDate()}`, `${this.Yesterday.getFullYear()}-${this.Yesterday.getMonth() + 1}-${this.Yesterday.getDate()}`, `${this.Today.getFullYear()}-${this.Today.getMonth() + 1}-${this.Today.getDate()}`],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [10, 20, 0],
            type: "line",
          },
        ],
      });
      this.cmyChart.setOption({
        title: {
          text: "总数据",
          left: "center",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: this.sumImage.busCount,
                name: `店铺数量${this.sumImage.busCount}`,
              },
              {
                value: this.sumImage.orderCount,
                name: `订单数量${this.sumImage.orderCount}`,
              },
              {
                value: this.sumImage.foodCount,
                name: `食品数量${this.sumImage.foodCount}`,
              },
              {
                value: this.sumImage.userCount,
                name: `用户数量${this.sumImage.userCount}`,
              },
            ],
            roseType: "area",
          },
        ],
      });
    },
    initToday() {
      this.myChart.setOption({
        title: {
          text: "新增用户",
          left: "center",
        },
        xAxis: {
          data: [`${this.Daybeforeyesterday.getFullYear()}-${this.Daybeforeyesterday.getMonth() + 1}-${this.Daybeforeyesterday.getDate()}`, `${this.Yesterday.getFullYear()}-${this.Yesterday.getMonth() + 1}-${this.Yesterday.getDate()}`, `${this.Today.getFullYear()}-${this.Today.getMonth() + 1}-${this.Today.getDate()}`],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [this.daySum.DaybeforeyesterdayCount, this.daySum.YesterdayCount, this.daySum.todayCount],
          },
        ],
      });
    },
    updateShowBox() {
      this.showBox = !this.showBox;
    },
    updateShowLine() {
      this.showLine = !this.showLine;
    },
    updateShowCircle() {
      this.showCircle = !this.showCircle;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.myChart = echarts.init(document.getElementById("main"));
    this.lmyChart = echarts.init(document.getElementById("line"));
    this.cmyChart = echarts.init(document.getElementById("circle"));
    selectAllCount().then((response) => {
      this.sumImage = response.data;
      this.intoData();
    });

    selectTimeUserCount(`${this.Today.getFullYear()}-${this.Today.getMonth() + 1}-${this.Today.getDate()}`, `${this.Yesterday.getFullYear()}-${this.Yesterday.getMonth() + 1}-${this.Yesterday.getDate()}`, `${this.Daybeforeyesterday.getFullYear()}-${this.Daybeforeyesterday.getMonth() + 1}-${this.Daybeforeyesterday.getDate()}`).then((response) => {
      console.log(response);
      this.daySum = response.data;
      this.initToday();
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.box {
  display: flex;
  justify-content: space-around;
  span {
    width: 300px;
    height: 40px;
    background-color: lightgray;
    margin: 10px;
    border-radius: 5px;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
  }
  .titleNow {
    background-color: cornflowerblue;
  }
  .titleSum {
    background-color: coral;
  }
}
.startEndImg {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 20px;
  .btnBox {
    line-height: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
    button {
      width: 80px;
      height: 30px;
      border: none;
      border-radius: 5px;
      margin-right: 10px;
    }

    .blue {
      background-color: cornflowerblue;
    }

    .orange {
      background-color: coral;
    }

    .rgbss {
      background-color: gold;
    }

    .gray {
      background-color: lightgray;
    }
  }
}

.boxImg-enter-active,
.boxImg-leave {
  opacity: 1;
  transition: all 0.5s;
}

.boxImg-enter,
.boxImg-leave-active {
  opacity: 0;
  transition: all 0.5s;
}
</style>
